<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/zuoye.css" />
	<!-- <script src="js/index.js"></script> -->
	<title>绿色家居</title>
	<style>
		
	</style>
</head>

<body class="w1">
	<header>
		<div>
			<nav class="flex">
				<div class="logo"><img src="img/logo.png" alt=""></div>
				<ul class="flex">
					<li><a href="">HOME</a></li>
					<li><a href="">ABOUT</a></li>
					<li><a href="">SERVICES</a></li>
					<li><a href="">PRICE</a></li>
					<li><a href="">PROJECTS</a></li>
					<li class="xl2"><a href="">PAGES</a>
						<div class="xl">
							<ul>
								<li class="xl2"><a href="">HOME</a></li>
								<li class="xl2"><a href="">ABOUT</a></li>
								<li class="xl2"><a href="">SERVICES</a></li>
								<li class="xl2"><a href="">PROJECTS</a></li>
								<li class="xl2"><a href="">PRICE</a></li>
								<li class="xl2"><a href="">CONTACT</a></li>
							</ul>
						</div>
					</li>
					<li><a href="">CONTACT</a></li>
				</ul>
			</nav>
		</div>

		<!-- 轮播图 -->
		<div class="bn box">
			<ul class="ul1" id="ul1">
				<li>
					<img src="img/slider/img1.jpg" alt="">
				</li>
				<li>
					<img src="img/slider/img2.jpg" alt="">
				</li>
				<li>
					<img src="img/slider/img3.jpg" alt="">
				</li>
			</ul>
			<div class="left-button" id="left">&lt;</div>
			<div class="right-button" id="right">&gt;</div>
			<ul class="ul2" id="ul2">
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		
	</header>



	<main>
		<div>
			<div class="bt bt2">WeOffer...</div>
			<dl class="flex">
				<dd><img src="./img/news1.jpg" alt="">
					<dl class="">
						<dt class="bt2">DESIGN</dt>
						<dd>
							Lorem ipsum dolor sit amet, consectetur adipisicing elit.
							Perferendis nesciunt est eos iusto delectus quas porro non
							neque quidem dolores totam aliquam tempora id!
						</dd>
					</dl>
				</dd>
				<dd><img src="img/news4.jpg" alt="">
					<dl class="">
						<dt class="bt2">DESIGN</dt>
						<dd>
							Lorem ipsum dolor sit amet, consectetur adipisicing elit.
							Perferendis nesciunt est eos iusto delectus quas porro non
							neque quidem dolores totam aliquam tempora id!
						</dd>
					</dl>
				</dd>
				<dd><img src="img/news2.jpg" alt="">
					<dl class="">
						<dt class="bt2">DESIGN</dt>
						<dd>
							Lorem ipsum dolor sit amet, consectetur adipisicing elit.
							Perferendis nesciunt est eos iusto delectus quas porro non
							neque quidem dolores totam aliquam tempora id!
						</dd>
					</dl>
				</dd>
			</dl>
		</div>

		<div class="flex w1 just">
			<dl class="w2 mg w3">
				<dt class="bt">About Us</dt>
				<dd>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit.
					Perferendis nesciunt est eos iusto delectus quas porro non
					neque quidem dolores totam aliquam tempora id!
				</dd>
			</dl>
			<dl class="w2 mg w3 pr">
				<dt class="bt">Clients</dt>
				<dd><span class="youbian"></span>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit.
					Perferendis nesciunt est eos iusto delectus quas porro non
					neque quidem dolores totam aliquam tempora id!
				</dd>
			</dl>
			<dl class="w2 mg w3">
				<dt class="bt">Projects</dt>
				<dd>
					<span class="redjt"></span>
					Lorem ipsum dolor sit amet, consectetur
				</dd>
				<dd>
					<span class="redjt"></span>
					Lorem ipsum dolor sit amet, consectetur
				</dd>
				<dd>
					<span class="redjt"></span>
					Lorem ipsum dolor sit amet, consectetur
				</dd>
				<dd>
					<span class="redjt"></span>
					Lorem ipsum dolor sit amet, consectetur
				</dd>
				<dd>
					<span class="redjt"></span>
					Lorem ipsum dolor sit amet, consectetur
				</dd>
				<dd>
					<span class="redjt"></span>
					Lorem ipsum dolor sit amet, consectetur
				</dd>
			</dl>
		</div>



		<!-- 尾部 -->
		<div class="w1">
			<div class="bt bt2">OurProjects</div>
			<dl class="flex">
				<dd><img src="img/img1.jpg" alt="">
					<dl>
						<dd>praesent commodo</dd>
						<dd>Nullam Condimentum Nibh Etiamsem</dd>
					</dl>
					<div><input type="button" value="Readmore" class="inpu"></div>
				</dd>
				<dd><img src="img/img2.jpg" alt="">
					<dl>
						<dd>praesent commodo</dd>
						<dd>Nullam Condimentum Nibh Etiamsem</dd>
					</dl>
					<div><input type="button" value="Readmore" class="inpu"></div>
				</dd>
				<dd><img src="img/img3.jpg" alt="">
					<dl>
						<dd>praesent commodo</dd>
						<dd>Nullam Condimentum Nibh Etiamsem</dd>
					</dl>
					<div><input type="button" value="Readmore" class="inpu"></div>
				</dd>
				<dd><img src="img/img4.jpg" alt="">
					<dl>
						<dd>praesent commodo</dd>
						<dd>Nullam Condimentum Nibh Etiamsem</dd>
					</dl>
					<div><input type="button" value="Readmore" class="inpu"></div>
				</dd>
			</dl>
		</div>
	</main>


	<footer>
		<div class="lv"></div>
		<div class="blok">
			<ul class="flex">
				<li><a href="">Home</a></li>
				<li><a href="">About</a></li>
				<li><a href="">Servies</a></li>
				<li><a href="">Price</a></li>
				<li><a href="">Projects</a></li>
				<li><a href="">Contact</a></li>
			</ul>
		</div>
	</footer>

</body>
<script>
	window.onload = function () {
		var lis = document.getElementById('ul1').children;
		var button = document.getElementById('ul2').children;
		var left = document.getElementById('left'),
			right = document.getElementById('right');
		var index = 0;
		var dinghsiqi;
		dingshi();
		(function () {
			lis[0].style.cssText = 'opacity:1';
			button[0].style.cssText = 'background-color:#9B9BFF;color:#fff;';
		}())
		function forin() {
			for (var i = 0; i < lis.length; i++) {
				lis[i].style.cssText = 'opacity:0';
				button[i].style.cssText = 'background-color:#fff;color:#000;';
			}
			lis[index].style.cssText = 'opacity:1';
			button[index].style.cssText = 'background-color:#9B9BFF;color:#fff;';
		}
		function dingshi() {
			dingshiqi = setInterval(function () {
				index++;
				if (index == lis.length) {
					index = 0;
				}
				forin();
			}, 3000);
		}
		left.onclick = function () {
			clearInterval(dingshiqi);
			index--;
			if (index < 0) {
				index = lis.length - 1;
			}
			forin();
			dingshi();
		}
		right.onclick = function () {
			clearInterval(dingshiqi);
			index++;
			if (index > lis.length - 1) {
				index = 0;
			}
			forin();
			dingshi();
		}
		for (let i = 0; i < button.length; i++) {
			button[i].onclick = function () {
				index = i;
				clearInterval(dingshiqi);
				forin();
				dingshi();
			}
		}
	}
</script>
</html>